<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <table-index :table="table" @loadData="loadData">
      <!-- 占位 撑开高度 -->
      <template #table-summary></template>
      <template #orderInfo="{ record }">
        <div class="order-info-item">
          <div>自有：</div>
          <div>{{ record.orderNo }}</div>
        </div>
        <div class="order-info-item" v-if="record.createTime">{{ record.createTime }}</div>
        <!-- 订单标签 -->
        <div class="order-info-item" v-if="record.orderLabelList && record.orderLabelList.length > 0">
          <tag type="primary" v-for="(item, index) in record.orderLabelList" :key="index">{{ item }}</tag>
        </div>
      </template>
      <!-- 承租人信息 -->
      <template #rentMember="{ record }">
        <template v-if="record.memberName || record.memberPhone || record.clientName">
          <div class="link-wrapper" @click="editLesseeFn(record)">
            <div class="text-link" v-if="record.memberName">{{ record.memberName }}</div>
            <div class="text-link" v-if="record.memberPhone">{{ record.memberPhone }}</div>
          </div>
          <!-- <div class="text-link no-link" style="margin-top: 4px" v-if="record.clientName">{{ record.clientName }}</div> -->
        </template>
      </template>
      <!-- 车辆信息 -->
      <template #carInfo="{ record }">
        <div class="link-wrapper">
          <!-- 车牌号显示 -->
          <!-- 待排车、待交车 可以进行排车和改排 -->
          <div class="text-link" :class="[![10, 100].includes(record.status) ? 'no-link' : '']">
            {{ record.status == 10 ? '未排车' : record.licenseNo }}
          </div>
          <!-- 车型名称 -->
          <div class="text-link no-link">{{ record.modelName }}</div>
        </div>
      </template>
      <!-- 取还车门店 -->
      <template #pickupReturnStore="{ record }">
        <div class="content-item pickup">
          <div class="flex items-start content-item-name">
            <tag type="warn" class="tag-pickup">取</tag>
            <div class="flex-1">{{ record.siteName }}</div>
          </div>
          <div class="content-item-tag">
            <tag type="default" size="large">{{ record.sendServiceFlag ? `上门送车: ${record.address}` : '到店取车' }}</tag>
          </div>
        </div>
        <div class="content-item return">
          <div class="flex items-start content-item-name">
            <tag type="success" class="tag-pickup">还</tag>
            <div class="flex-1">{{ record.returnSiteName }}</div>
          </div>
          <div class="content-item-tag">
            <tag type="default" size="large">{{ record.returnServiceFlag ? `上门取车: ${record.returnAddress}` : '到店还车' }}</tag>
          </div>
        </div>
      </template>
      <!-- 租赁周期 -->
      <template #leaseRange="{ record }">
        <div class="content-item pickup">
          <div class="flex items-start content-item-name">
            <tag type="warn" class="lease-range-tag">预取</tag>
            <div class="flex-1" v-if="record.expectedUseCarTime">
              <div>{{ getDateTimeStrDate(record.expectedUseCarTime) }}</div>
              <!-- <div>{{ getDateTimeStrTime(record.startTime) }}</div> -->
            </div>
          </div>
        </div>
        <div class="content-item return">
          <div class="flex items-start content-item-name">
            <tag type="success" class="lease-range-tag">预还</tag>
            <div class="flex-1" v-if="record.expectedReturnCarTime">
              <div>{{ getDateTimeStrDate(record.expectedReturnCarTime) }}</div>
              <!-- <div>{{ getDateTimeStrTime(record.endTime) }}</div> -->
            </div>
          </div>
        </div>
        <div class="content-item pickup" v-if="record.realUseCarTime">
          <div class="flex items-start content-item-name">
            <tag type="warn" class="lease-range-tag">实取</tag>
            <div class="flex-1" v-if="record.realUseCarTime">
              <div>{{ getDateTimeStrDate(record.realUseCarTime) }}</div>
              <!-- <div>{{ getDateTimeStrTime(record.actualStartTime) }}</div> -->
            </div>
          </div>
        </div>
        <div class="content-item return" v-if="record.realReturnCarTime">
          <div class="flex items-start content-item-name">
            <tag type="success" class="lease-range-tag">实还</tag>
            <div class="flex-1" v-if="record.realReturnCarTime">
              <div>{{ getDateTimeStrDate(record.realReturnCarTime) }}</div>
              <!-- <div>{{ getDateTimeStrTime(record.actualEndTime) }}</div> -->
            </div>
          </div>
        </div>
      </template>
      <!-- 押金 -->
      <template #deposit="{ record }">
        <div class="content-item pickup">
          <div class="flex items-start content-item-name">
            <tag :type="['未收', '未退'].includes(record.carDepositStatusName) ? 'warn' : 'success'">{{
              record.carDepositStatusName || '-'
            }}</tag>
            <div class="flex-1">{{ `租车押金：${record.carDepositAmount ? record.carDepositAmount : '0'}` }}</div>
          </div>
        </div>
        <div class="content-item return">
          <div class="flex items-start content-item-name">
            <tag :type="['未收', '未退'].includes(record.illegalDepositStatusName) ? 'warn' : 'success'">{{
              record.illegalDepositStatusName || '-'
            }}</tag>
            <div class="flex-1">{{ `违章押金：${record.violationDepositAmount ? record.violationDepositAmount : '0'}` }}</div>
          </div>
        </div>
      </template>
      <!-- 车务专员 -->
      <template #staff="{ record }">
        <div class="content-item pickup">
          <div class="flex items-start content-item-name">
            <tag type="primary">交</tag>
            <div class="flex-1">{{ record.giveStaffName || '未指派' }}</div>
          </div>
        </div>
        <div class="content-item return">
          <div class="flex items-start content-item-name">
            <tag type="primary">还</tag>
            <div class="flex-1">{{ record.returnStaffName || '未指派' }}</div>
          </div>
        </div>
      </template>
      <!-- 作废信息 -->
      <template #invalidInfo="{ record }">
        <div class="link-wrapper" v-if="record.invalidStaffName || record.invalidTime">
          <div class="text-link">{{ record.invalidStaffName }}</div>
          <div class="text-link">{{ record.invalidTime }}</div>
        </div>
      </template>
    </table-index>
    <!-- 账单计划弹框 -->
    <bill-table-modal ref="billTableModalRef" />
  </div>
</template>
<!-- todoList -->
<!-- 1 押金状态判断由文字改为 id 值判断 -->
<!-- 2 车务专员 列表字段 yapi 未确认 -->
<script setup name="InvalidLongOrderList">
  import { ref, reactive, onMounted, computed } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { usePageDict } from '@/hooks/useDict'
  import { getList, contractListInfo, getBillPlanList } from '@/api/order/czsOrder'
  import billTableModal from './components/list-modals/bill-table-modal.vue'
  import useNavigate from '@/hooks/useNavigate'
  const { navigateTo } = useNavigate()
  import { cloneDeep } from 'lodash-es'

  const dict = usePageDict('longOrderDict')

  // dateTime Attrs
  const dateTimeAttrs = {
    type: 'i-range-picker',
    attrs: {
      showTime: true,
      timePickerProps: {
        defaultValue: ['00:00:00', '23:59:59'],
      },
    },
  }
  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '订单号', prop: 'orderNo', placeholder: '请输入渠道/自有订单号', type: 'a-input' },
      { label: '承租人信息', prop: 'memberNamePhone', placeholder: '请输入承租人姓名/手机号', type: 'a-input' },
      { label: '车牌号', prop: 'licenseNoLike', type: 'a-input' },
      { label: '车型', prop: 'carModelId', type: 'remote-select', attrs: { type: 'car_model_saasList' } },
      // { label: '订单状态', prop: 'orderStatusList', type: 'a-select', options: dict.orderStatusEnum, multiple: true },
      { label: '订单来源', prop: 'orderSource', type: 'a-select', options: dict.orderSourceEnum },
      { label: '订单标签', prop: 'orderLableList', type: 'a-select', options: dict.orderLabelEnum, multiple: true },
      { label: '取车门店', prop: 'siteId', type: 'remote-select', attrs: { type: 'site_listBystaff' } },
      { label: '还车门店', prop: 'returnSiteId', type: 'remote-select', attrs: { type: 'site_listBystaff' } },
      {
        label: '预计取车时间',
        prop: 'startTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.expectedUseCarTimeStart = value[0]
          queryParam.expectedUseCarTimeEnd = value[1]
        },
      },
      {
        label: '预计还车时间',
        prop: 'endTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.expectedReturnCarTimeStart = value[0]
          queryParam.expectedReturnCarTimeEnd = value[1]
        },
      },
      {
        label: '实际取车时间',
        prop: 'actualStartTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.realUseCarTimeStart = value[0]
          queryParam.realUseCarTimeEnd = value[1]
        },
      },
      {
        label: '实际还车时间',
        prop: 'actualEndTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.realReturnCarTimeStart = value[0]
          queryParam.realReturnCarTimeEnd = value[1]
        },
      },
      {
        label: '下单时间',
        prop: 'orderCreateTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.createTimeStart = value[0]
          queryParam.createTimeEnd = value[1]
        },
      },
      {
        label: '作废时间',
        prop: 'invalidTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.invalidTimeBegin = value[0]
          queryParam.invalidTimeEnd = value[1]
        },
      },
    ]
  })

  const defaultQueryParam = {
    // 下单时间
    orderCreateTimeRange: [],
    // 预计取车时间
    startTimeRange: [],
    // 预计还车时间
    endTimeRange: [],
    // 实际取车时间
    actualStartTimeRange: [],
    // 实际还车时间
    actualEndTimeRange: [],
    // 作废时间
    invalidTimeRange: [],
    statusList: [-1000],
    // 已作废
    deleteFlag: 1,
  }
  // 页面初始化 结束
  const getDateTimeStrDate = (timeStr) => {
    return timeStr ? timeStr.split(' ')[0] : '-'
  }
  // 定义 queryParam
  const queryParam = reactive({
    ...cloneDeep(defaultQueryParam),
  })

  // table 配置
  const table = useTable({
    columns: [
      { title: '订单信息', dataIndex: 'orderInfo', width: 220, slotName: 'orderInfo', fixed: 'left' },
      { title: '下单时间', dataIndex: 'orderCreateTime', width: 180 },
      { title: '订单状态', render: () => '已作废', width: 100 },
      { title: '承租人', dataIndex: 'rentMember', slotName: 'rentMember' },
      { title: '车辆信息', dataIndex: 'carInfo', slotName: 'carInfo' },
      { title: '订单来源', dataIndex: 'orderSourceName' },
      { title: '取还车门店', dataIndex: 'pickupReturnStore', slotName: 'pickupReturnStore', width: 200 },
      { title: '租赁周期', dataIndex: 'leaseRange', slotName: 'leaseRange', width: 200 },
      { title: '租期', dataIndex: 'leaseNumberStr', width: 110 },
      { title: '费用金额', dataIndex: 'totalAmount', unit: '元', width: 120 },
      { title: '待结金额', dataIndex: 'receiveAmount', unit: '元', width: 120 },
      { title: '押金', dataIndex: 'carDepositAmount', unit: '元', slotName: 'carDepositAmount', width: 220 },
      { title: '车务专员', dataIndex: 'staff', slotName: 'staff' },
      { title: '作废备注', dataIndex: 'invalidRemark', ellipsis: true },
      { title: '作废信息', dataIndex: 'invalidInfo', slotName: 'invalidInfo', width: 180 },
    ],
    tableLoading: false,
    operates: [
      {
        label: '订单详情',
        permission: 'svms:order:invalid:long-order.detail',
        method: (record) => {
          navigateTo(`/long-order/detail/${record.id}?tab=1`, `${record.orderNo}-长租详情`)
        },
      },
      {
        label: '操作记录',
        permission: 'svms:order:invalid:long-order.operaterecords',
        method: (record) => {
          navigateTo(`/long-order/detail/${record.id}?tab=11`, `${record.orderNo}-操作记录`)
        },
      },
      {
        label: '查看账单计划',
        permission: 'svms:order:invalid:long-order.viewBillPlan',
        method: (record) => {
          showBillPlan(record)
        },
      },
    ],
    buttons: [],
  })
  // 列表接口调用
  const loadData = (page) => {
    const fn = useFetchTableDataApi(table, queryParam, getList)
    fn(page)
  }
  // 展示账单计划
  const billTableModalRef = ref()

  const showBillPlan = (record) => {
    getBillPlanList({
      orderId: record.id,
    }).then((res) => {
      billTableModalRef.value.open({ id: record.id, billData: res.result })
    })
  }

  onMounted(() => {
    loadData()
  })
</script>

<style lang="less" scoped>
  .link-wrapper {
    font-size: 14px;
    .text-link {
      color: #1d2129;
    }
    .text-link + .text-link {
      margin-top: 6px;
    }
  }
  .order-info-item {
    .custom-tag {
      margin-right: 8px;
      margin-bottom: 10px;
    }
  }
  .order-info-item + .order-info-item {
    margin-top: 10px;
  }
  .content-item {
    .content-item-name {
      margin-bottom: 4px;
      .staff-can-click {
        color: rgb(var(--primary-6));
        cursor: pointer;
      }
      .tag-pickup {
        padding: 0 3px;
        line-height: 18px;
      }
      :deep(.custom-tag) {
        margin-right: 6px;
        position: relative;
        top: 1px;
      }
    }
    .content-item-tag :deep(.custom-tag.default) {
      line-height: 20px;
      padding: 4px 8px;
    }
  }
  .content-item + .content-item {
    margin-top: 10px;
  }
  .billTable {
    margin-bottom: 50px;
  }
  .fee-btn {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .contContainer {
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
  }
</style>
